<template>
	<div class="flex_col m5 p10">
		<div class="flex_row_center">
			<label>工号:</label>
			<el-input clearable style="width: 150px;" v-model="ctx.account" />
			<label class="ml5">日期:</label>
			<el-date-picker v-model="ctx.date" />
			<el-select class="ml5" style="width: 150px;" v-model="ctx.time">
				<el-option v-for="(item, index) in TIMES" :key="index" :value="item" :label="item" />
			</el-select>
			<el-button class="ml5" type="primary" @click="onClickQuery">查询假期</el-button>
		</div>
		<div class="flex_row_center mt5">
			<label>请假天数:</label>
			<el-input style="width: 100px;" clearable v-model="ctx.days"/>
			<el-button class="ml5"  type="primary" @click="onClickLeave">请假</el-button>
		</div>
		<div class="flex_col m5 p10" v-if="ctx.holiday != null">
			<EmplParts :info="ctx.holiday.empl" />
			<div style="font-size: large;">年休详情</div>
			<div class="flex_row card2 mt5 p10" v-for="(item, index) in ctx.holiday.holiday.holiday_parts" :key="index">
				<div class="flex_col card2 m5 p10 flex_start_self">
					<div class="flex_row_center">
						<label>年假类型:</label>
						<label>{{ item.holiday.description }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>开始时间(包含):</label>
						<label>{{ item.holiday.begin_date }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>截止时间(不含):</label>
						<label>{{ item.holiday.end_date }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>年假总天数:</label>
						<label>{{ item.holiday.days }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>可用年假天数:</label>
						<label>{{ item.days }}</label>
					</div>
				</div>
				<div class="flex_col">
					<div style="justify-content: space-around;" class="flex_row_center mt5 card2 p10" v-for="(s_item, s_index) in item.leaves" :key="s_index">
						<label>{{ s_item.date }} {{ TIMES[s_item.time] }}</label>
						<label>请假</label>
						<label>{{ s_item.days }}</label>
						<label>天</label>
						<el-button class="ml5" type="warning" @click="onClickDeleteLeave(s_item)">删除</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">

import { reactive, watch } from 'vue';
import { selectEmpl, dateFormat, TIMES } from '@/service/global';
import { runAction } from '@/utils/ui';
import { service } from '@/service/api';
import { type ServiceYearCalcRes, type LeaveInfo } from '@/service/api';
import EmplParts from '@/components/EmplParts.vue';

interface Ctx {
	account: string,
	days: string,
	date: Date,
	time: string,
	holiday: ServiceYearCalcRes | null,
}

const ctx = reactive<Ctx>({
	account: selectEmpl.value.account,
	days: '',
	date: new Date(),
	time: TIMES[0],
	holiday: null,
});

watch(selectEmpl, () => {
	ctx.account = selectEmpl.value.account
});

async function onClickLeave() {
	runAction('创建请假单', '创建中', async () => {
		if (ctx.account.length == 0) {
			throw '请输入工号';
		}
		if (ctx.days.length == 0) {
			throw '请假天数不能为0';
		}

		const time = TIMES.indexOf(ctx.time);
		await service.createLeave({
			time,
			account: ctx.account,
			date: dateFormat(ctx.date),
			days: parseFloat(ctx.days),
		});
		const info = await service.calcYearHoliday({
			account: ctx.account,
			now_date: dateFormat(ctx.date)
		});
		ctx.holiday = info;
	});
}

async function onClickDeleteLeave(item: LeaveInfo) {
	runAction('删除', '删除请假信息', async () => {
		await service.deleteLeave({
			id: item.id
		});
		const info = await service.calcYearHoliday({
			account: ctx.account,
			now_date: dateFormat(ctx.date)
		});
		ctx.holiday = info;
	})
}

async function onClickQuery() {
	runAction('查询假期', '查询中', async () => {
		if (ctx.account.length == 0) {
			throw '请输入工号';
		}
		const info = await service.calcYearHoliday({
			account: ctx.account,
			now_date: dateFormat(ctx.date)
		});
		ctx.holiday = info;
	});
}

</script>
